<template>
  <page-scroll :footer="false">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
        :title="title"
        :is_name="true"
        :is_back="true"
        :is_lang="false"
        :is_kf="false"
      ></gltitle>
    </template>
    <template #content>
      <div class="container" style="margin-top: 0.24rem">
        <div class="setBox time_style">
          {{ result }}
        </div>
        <!-- 任务区 -->
        <div class="setBox flex" @click="type_show = true">
          <div class="flex1">{{ gradeData }}</div>
          <div class="s"><van-icon name="arrow" /></div>
        </div>

        <van-pull-refresh
          v-model="refreshing"
          :success-text="$t('load.refreshed')"
          @refresh="onRefresh(0)"
          head-height="200"
          v-if="!emptyShow"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="$t('load.no_more')"
            :loading-text="$t('load.loading')"
            @load="onLoad"
            :immediate-check="check"
          >
            <div class="videoLists">
              <ul class="list">
                <li
                  v-for="(item, k) in datalist"
                  :key="k"
                  @click="checkLevel(item)"
                >
                  <div class="pic" :data-text="item.hasWatch?$t('page.doc4'):$t('page4.doc6')">
                    <img v-lazy="item.coverUrl" alt="" />
                    <!-- <div class="abs">
                          <div class="v"><img src="../../assets/images/ico_home6.png" alt="">
                              {{$t('page3.doc103',{n1:item.readCount})}}
                          </div>
                          <div class="time">{{item.duration}}</div>
                      </div> -->
<!--                    <div class="str">-->
<!--                      <span v-if="!item.hasWatch">{{ $t("page4.doc6") }}</span>-->
<!--                      <span v-else>{{ $t("page.doc4") }}</span>-->
<!--                    </div>-->
                  </div>
                  <!-- <div class="info">
                      <div class="title line_2x">
                          {{item.name}}
                      </div>
                      <div class="pingfen flex">
                          <div class="str flex1">
                              <van-rate v-model="item.score"
                                        allow-half void-icon="star"
                                        void-color="#D9D9D9"
                                        color="#FFC837"
                              />
                          </div>
                          <div class="s">
                              {{$t('page3.doc104',{n1:item.score})}}
                          </div>
                      </div>

                      <button>{{$t('page3.doc105')}}</button>
                  </div> -->
                </li>
              </ul>
              <div class="h32"></div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>

      <!-- 等级下来框 -->
      <van-popup v-model="type_show" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          :default-index="defaultIndex"
          @confirm="onConfirm"
          @cancel="onCancel"
          item-height=".8rem"
          :confirm-button-text="$t('page.doc83')"
          :cancel-button-text="$t('page4.doc63')"
        />
      </van-popup>
    </template>
  </page-scroll>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      title: this.$t("title.doc45"),
      titleLeft: this.$t("title.doc1"),

      movieList: [],
      datalist: [],
      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow: false,
      datalistNum: 0,
      check: true,
      type_show: false, // 下拉开关
      columns: [], // 下拉框数据
      gradeData: "", // 显示等级数据
      levelData: [], // 等级数据
      defaultIndex: 0, // 默认选择
      timer: undefined, //定时器
      result: "", //倒计时显示
    };
  },

  mounted() {
    this.getList();
    this.getLevel();
    this.startTime(); //调用定时器
  },
  beforeDestroy() {
    //页面销毁清除定时器
    clearInterval(this.timer);
  },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  methods: {
    ...mapMutations(["SET_GEADE"]),
    checkLevel(item) {
      // if (this.userData.level > -1) {
      //   let levelInfo = {}
      //   for (let i = 0; i < this.levelData.length; i++) {
      //     if (this.levelData[i].level == this.userData.level) {
      //       levelInfo = this.levelData[i]
      //       break;
      //     }
      //   }
       // if (levelInfo.incomeDailyCount - levelInfo.incomeDailyUseCount > 0) {
          this.path_url('/home/view?id=' + item.movieId)
        // } else {
        //   this.$toast(this.$t('new.doc51'))
        // }
      // } else {
      //   this.$toast(this.$t('new.doc50'))
      // }
    },
    countDown() {
      let now = new Date(); // 获取当前时间
      let h = parseFloat(24) - parseFloat(now.getHours() + parseFloat(1));
      let m = 60 - now.getMinutes();
      let s = 60 - now.getSeconds();
      this.result = h + ":" + m + ":" + s;
      return this.result;
    },
    startTime() {
      // 循环执行
      this.timer = setInterval(() => {
        this.countDown();
      }, 1000);
    },

    init() {
      if (this.columns.length > 0) {
        this.gradeData = this.columns[this.defaultIndex];
      }
    },
    // 等级列表
    getLevel() {
      this.$post(this.URL.wallet.level, {}).then((res) => {
        if (res.code == 0) {
          this.levelData = res.data;
          let data = res.data;
          let arr = [];
          data.map((item, index) => {
            if (item.level === this.$store.state.grade) {
              this.defaultIndex = index;
            }
            if(this.$store.state.userData.level>=item.level){
              arr.push(
              `${item.name} ${this.$t("page3.doc70")}(${
                item.incomeDailyUseCount
              }/${item.incomeDailyCount})`
            );
            }

          });
          this.columns = arr;
          this.init();
        } else {
          this.$toast(res.message);
        }
      });
    },
    // 下拉取值
    onConfirm(value, index) {
      this.gradeData = value;
      this.SET_GEADE(index);

      this.type_show = false;
    },
    // 关闭下拉框
    onCancel() {
      this.type_show = false;
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.datalist = [];
          this.refreshing = false;
        }
        this.getlist();
      }, 1000);
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;

      this.pageSize = 0;
      this.totalPage = "";

      this.onLoad();
    },

    getlist() {
      this.pageSize = this.pageSize + 1;

      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true;

        return;
      }
      this.$post(this.URL.income.scenter, {
        scoreType: 1,
        page: this.pageSize,
        pageSize: 10,
      }).then((res) => {
        if (res.code == 0) {
          if (res.code == 2001) {
            this.loading = true;
            this.finished = false;
            this.emptyShow = true;
            return;
          }
          this.totalPage = res.data.page.totalPage;
          this.pageIndex = res.data.page.index;

          this.datalistNum = res.data.page.count;

          let initData = res.data.list;
          this.datalist.push(...initData);
          this.loading = false;
        } else {
          this.$toast(res.message);
        }
      });
    },

    getList() {
      this.$post(this.URL.home.mes_list, { groupKey: "SYSTEM" }).then(
        (res) => {}
      );
    },

    path_url(url, item) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.setBox {
  border-radius: 0.16rem;
  border: var(--COborder3);
  background: var(--CObackgroundLinear2);
  color: var(--COborder3);
  height: 0.88rem;
  align-items: center;
  padding: 0 0.24rem;
  margin-bottom: 0.24rem;
}
.time_style {
  line-height: 0.88rem;
  text-align: center;
  font-size: 0.38rem;
  letter-spacing: 0.08rem;
}
.videoLists {
  margin-bottom: 1rem;
  .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 47.33%;
      margin-right: 0rem;
      //.pic {
      //  height: 4.28rem;
      //  position: relative;
      //
      //  img {
      //    height: 100%;
      //  }
      //}
      .pic{
        border: 0.02rem solid #d9b151;
        border-radius: 0.2rem;
        position: relative;
        height: 4.28rem;
        img {
          height: 100%;
        }
        &::after{
          content: attr(data-text);
          position: absolute;
          width: 0.8rem;
          top: 0;
          right: 0;
          background: var(--color-orange-77, #FFDF89);
          color: #000000;
          font-size: 0.18rem;
          text-align: center;
          border-radius: 0 0.2rem 0 0.12rem;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
